<template>
  <div class="app-container">
    <el-drawer :wrapperClosable="false" :close-on-press-escape="false" title="入网资质" @closed="close" :visible.sync="open" size="50%" append-to-body>
      <el-form v-loading = "loading" ref="form" :rules="rules" :model="form" label-width="110px" class="form">
        <el-row>
          <el-col :span="8">
            <el-form-item label="营业执照" prop="businessImage">
                <image-upload :limit="1" :is-show-fail-tip="businessImageStatus !== 'SUCCESS'" :fail-msg="businessImageMsg" :isShowTip="false" v-model="form.businessImage"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证件正面（人像面）" prop="certFrontSide">
              <image-upload :limit="1" :is-show-fail-tip="certFrontSideStatus !== 'SUCCESS'" :fail-msg="certFrontSideMsg" :isShowTip="false" v-model="form.certFrontSide"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证件背面（国徽面）" prop="certBackSide">
              <image-upload :limit="1" :is-show-fail-tip="certBackSideStatus !== 'SUCCESS'" :fail-msg="certBackSideMsg" :isShowTip="false" v-model="form.certBackSide"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="门头" prop="storeHeaderImg">
              <image-upload :limit="1" :is-show-fail-tip="storeHeaderImgStatus !== 'SUCCESS'" :fail-msg="storeHeaderImgMsg" :isShowTip="false" v-model="form.storeHeaderImg"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="场景照片" prop="storeIndoorImg">
              <image-upload :limit="1" :is-show-fail-tip="storeIndoorImgStatus !== 'SUCCESS'" :fail-msg="storeIndoorImgMsg" :isShowTip="false" v-model="form.storeIndoorImg"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开户许可证" prop="accountImg">
              <image-upload :limit="1" :is-show-fail-tip="accountImgStatus !== 'SUCCESS'" :fail-msg="accountImgMsg" :isShowTip="false" v-model="form.accountImg"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="footer-operation">
        <el-button @click="open = false">返回</el-button>
        <el-button :loading="loading" type="success" v-if="form.settledStatus === 1" @click="submitForm">保存</el-button>
        <el-button :loading="loading" type="primary" @click="submit" v-if="form.settledStatus === 1">提交</el-button>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import IncomingFileUpload from '@/components/IncomingFileUpload/index.vue'

let isRefresh = false
import { accountBindVerify, imageUpload, imageUrlUploadQuery, updateDinPay } from '@/api/ecs/dinPay'
export default {
  name: "qualifications",
  components: { IncomingFileUpload },
  props: {
    opens: {
      type: Boolean,
      default: false
    },
    formData: {
      type: Object,
      default: {},
    }
  },
  data() {
    return {
      rules:{
        receiveAmount:[
          {required:true,message:"请输入回款金额",trigger:"blur"}
        ],
        businessImage: [
          { required: true, message: '企业证件图片不能为空', trigger: 'blur' }
        ],
        storeHeaderImg:[
          { required: true, message: '门头照不能为空', trigger: 'change' }
        ],
        storeIndoorImg:[
          { required: true, message: '场景照片不能为空', trigger: 'change' }
        ],
        accountImg:[
          { required: true, message: '开户许可证不能为空', trigger: 'change' }
        ],
        certFrontSide: [
          { required: true, message: '请上传法人身份证件正面照片', trigger: 'change' }
        ],
        certBackSide: [
          { required: true, message: '请上传法人身份证件背面照片', trigger: 'change' }
        ],
      },

      form:{receiveAmount:"",bankCardId:"",id:""},
      open:false,
      loading:false,
      businessImageStatus:"SUCCESS",
      businessImageMsg:"",
      storeIndoorImgStatus:"SUCCESS",
      storeIndoorImgMsg:"",
      accountImgStatus:"SUCCESS",
      accountImgMsg:"",
      storeHeaderImgStatus:"SUCCESS",
      storeHeaderImgMsg:"",
      certBackSideStatus:"SUCCESS",
      certBackSideMsg:"",
      certFrontSideStatus:"SUCCESS",
      certFrontSideMsg:"",
    }
  },
  methods:{
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          updateDinPay(this.form).then(response => {
            if (response.code === 200) {
              this.$modal.msgSuccess('保存成功')
              this.open = false
              this.isRefresh = true
            } else {
              this.loading = false
            }
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
    submit(){
      this.$refs['form'].validate(valid => {
        if (valid) {
          updateDinPay(this.form).then(response => {
            if (response.code === 200) {
              imageUpload({id:this.form.id}).then(res=>{
                if (res.code === 200) {
                  this.$modal.msgSuccess('提交成功')
                  this.open = false
                  this.isRefresh = true
                }
              })

            } else {
              this.loading = false
            }
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
    close(){
      this.$emit("close",false,isRefresh)
    },
    returnCommon(res,credentialType){
      let returnMap = res.data
      if (returnMap.code === "0000" ){
        let returnData = JSON.parse(returnMap.data);
        if (returnData.uploadStatus !== "SUCCESS"){
          this.failCommon(credentialType,returnData.msg,returnData.uploadStatus);
        }
      }else{
        this.failCommon(credentialType,returnMap.msg,"NOT_UPLOADED");
      }
    },
    failCommon(credentialType,msg,status){
      if (status === "DOING"){
        msg="处理中"
      }
      if(credentialType === "UNIFIED_CODE_CERTIFICATE"){
        this.businessImageStatus = status
        this.businessImageMsg = msg
      }
      if(credentialType === "INTERIOR_PHOTO"){
        this.storeIndoorImgStatus = status
        this.storeIndoorImgMsg = msg
      }
      if(credentialType === "FRONT_OF_ID_CARD"){
        this.certFrontSideStatus = status
        this.certFrontSideMsg = msg
      }
      if(credentialType === "BACK_OF_ID_CARD"){
        this.certBackSideStatus = status
        this.certBackSideMsg = msg
      }
      if(credentialType === "PERMIT_FOR_BANK_ACCOUNT"){
        this.accountImgStatus = status
        this.accountImgMsg = msg
      }
      if(credentialType === "SIGN_BOARD"){
        this.storeHeaderImgStatus = status
        this.storeHeaderImgMsg = msg
      }

    }
  },
  watch: {
    opens: {
      handler(val) {
        this.open = val
        this.form = this.formData
        imageUrlUploadQuery({orderNo:this.formData.orderNo,credentialType:"UNIFIED_CODE_CERTIFICATE"}).then(res=>{if (res.code === 200){this.returnCommon(res,"UNIFIED_CODE_CERTIFICATE");}})
        imageUrlUploadQuery({orderNo:this.formData.orderNo,credentialType:"INTERIOR_PHOTO"}).then(res=>{if (res.code === 200){this.returnCommon(res,"INTERIOR_PHOTO");}})
        imageUrlUploadQuery({orderNo:this.formData.orderNo,credentialType:"FRONT_OF_ID_CARD"}).then(res=>{if (res.code === 200){this.returnCommon(res,"FRONT_OF_ID_CARD");}})
        imageUrlUploadQuery({orderNo:this.formData.orderNo,credentialType:"BACK_OF_ID_CARD"}).then(res=>{if (res.code === 200){this.returnCommon(res,"BACK_OF_ID_CARD");}})
        imageUrlUploadQuery({orderNo:this.formData.orderNo,credentialType:"PERMIT_FOR_BANK_ACCOUNT"}).then(res=>{if (res.code === 200){this.returnCommon(res,"PERMIT_FOR_BANK_ACCOUNT");}})
        imageUrlUploadQuery({orderNo:this.formData.orderNo,credentialType:"SIGN_BOARD"}).then(res=>{if (res.code === 200){this.returnCommon(res,"SIGN_BOARD");}})

      },
      deep: true,
      immediate: true
    },
  }
}

</script>


<style scoped lang="scss">
::v-deep .el-drawer__header {
  font-weight: 900;
  font-size: 18px;
}

.certificateContacts {
  padding: 0 20px;
}

::v-deep .el-date-editor.el-input {
  width: 100%;
}

::v-deep .el-checkbox__label {
  padding-left: 4px;
}

.form {
  padding-bottom: 80px;
}

.footer-operation {
  bottom: 0;
  width: 100%;
  height: 80px;
  display: flex;
  z-index: 10000;
  padding: 0 20px;
  text-align: center;
  position: absolute;
  align-items: center;
  background-color: #ffffff;
  border-top: 1px solid #EBEEF5;

  .el-button {
    width: 100%;
  }
}
</style>
